<template>
	<view class="wp">
		<view class="header">
			<view class="txt-xh">
				<view class="h3">
					¥{{dealerUser.money}}
				</view>
				<text>可提现金额(元)</text>
				<!-- <text class="s2">?</text> -->
			</view>
		</view>
		<view class="boe">
			<view class="m-about">
				<view class="h3">
					提现金额
				</view>
				<view class="num">
					<view class="desc">￥</view> <text>最低提现金额:{{WEBCONFIG.withdrawal_minimum}}￥</text>
					<input placeholder="请输出金额" v-model="form.price" type="number">
				</view>
				<view class="boe">
					<text>提现至</text>
					<!-- <text class="s1">微信零钱</text> -->
					<view class="s1">
						<radio-group @change="selectType">
							<radio :value="1" color='#2979ff' :checked="true" style="transform:scale(0.7)" />微信
							<radio :value="2" color='#2979ff' style="transform:scale(0.7)" />支付宝
						</radio-group>
					</view>
				</view>

				<view class="inp-box flex flex-x-center" v-if='form.type=="1"'>
					<view class="upd-box flex flex-center" @click="submit()">
						<uni-icons type='cloud-upload' size='20' v-if='image==""'></uni-icons>
						<image :src='image' style="width: 200rpx;height: 200rpx;" v-else></image>
					</view>
				</view>

				<view class="inp-box" v-else>
					<view class="inp">
						<input v-model="form.name" placeholder-style='font-size:24rpx;' placeholder="请输入真实姓名" />
					</view>
					<view class="inp">
						<input v-model="form.account" placeholder-style='font-size:24rpx;' placeholder="请输入支付宝账号" />
					</view>
				</view>

				<view class="g-queding-kx" @click="onWithdrawal">
					<view class="txt">
						<view class="s1">提现</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useWebConfigStore, useRefs } from "@/stores";
	import { onLoad } from '@dcloudio/uni-app'
	import { $http } from '@/utils'
	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	const form = ref({
		price: 0,
		type: '1',
		name: '',
		account: '',
		qrcode: ''
	})
	const image=ref('')
	const dealerUser = ref({
		money: 0
	})
	onLoad(() => {
		getDealer()
	})
	const getDealer = (() => {
		$http.get('Dealer/getDealerUser').then(res => {
			dealerUser.value = res.data
		})
	})
	const onWithdrawal = (() => {
		$http.post('Dealer/withdrawal', { data: form.value }).then(res => {
			uni.showToast({
				title: '申请提现成功',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		})
	})
	const selectType = ((e : any) => {
		form.value.type = e.detail.value
	})

	
	
	// const saveAlbum = (() => {
	// 	uni.getSetting({
	// 		success(res : any) {
	// 			if (res.authSetting['scope.writePhotosAlbum']) {
	// 				submit()
	// 			} else {
	// 				uni.authorize({ //如果没有授权，向用户发起请求
	// 					scope: 'scope.writePhotosAlbum',
	// 					success: () => {
	// 						submit()
	// 					},
	// 					fail: () => {
	// 						uni.showModal({
	// 							content: '检测到您没打开保存图片的权限，是否去设置打开？',
	// 							confirmText: "确认",
	// 							cancelText: '取消',
	// 							success: (res) => {
	// 								if (res.confirm) {
	// 									uni.openSetting({
	// 										success: (res) => {
	// 											console.log(res);
	// 										}
	// 									})
	// 								} else {
	// 									uni.showToast({
	// 										title: '取消授权',
	// 										icon: 'none'
	// 									})
	// 									return false;
	// 								}
	// 							}
	// 						})
	// 					}
	// 				})
	// 			}
	// 		}
	// 	})
	// })
	
	const submit = (() => {
		$http.get('Search/determineS').then(res => {
			uni.chooseImage({
				sourceType: ['album'],
				success(res : any) {
					$http.upload('Upload/upload', { name: 'file', filePath: res.tempFilePaths[0] }).then(res1 => {
						form.value.qrcode = res1.data.path
						image.value=res1.data.url
					})
				}
			})
		})
	})
</script>

<style>
	.header {
		background-color: #457BF7;
		position: relative;
		height: 400rpx;
	}

	.txt-xh {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.txt-xh .h3 {
		font-weight: bold;
		color: #fff;
		margin-bottom: 5rpx;
		font-size: 52rpx;
	}

	.txt-xh text {
		color: #fff;
		font-size: 24rpx;
	}

	.txt-xh .s2 {
		border: 1px solid #fff;
		border-radius: 50%;
		display: inline-block;
		margin-left: 15rpx;
		font-size: 14rpx;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
	}

	.m-about {
		margin: 0 40rpx;
		padding: 20rpx 40rpx;
		margin-top: -80rpx;
		background-color: #fff;
		border-radius: 10rpx;
		position: relative;
		z-index: 99;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 140rpx;
	}

	.m-about .h3 {
		font-size: 28rpx;
		margin-bottom: 25rpx;
	}

	.m-about .num {
		margin-bottom: 35rpx;
		border-bottom: 1px solid #f2f2f2;
	}

	.m-about .num .desc {
		float: left;
		font-size: 24rpx;
		margin-top: 6rpx;
	}

	.m-about .num text {
		float: right;
		color: #4988FD;
		font-size: 24rpx;
		margin-bottom: 6rpx;
	}

	.m-about .boe {
		overflow: hidden;
		margin-bottom: 20rpx;
		color: #666666;
		font-size: 24rpx;
	}

	.m-about .boe text {
		float: left;
	}

	.m-about .boe .s1 {
		float: right;
	}

	uni-input {
		height: 1.4em;
		font-size: 24rpx;
		line-height: 1.4em;
		margin-bottom: 15rpx;
	}

	.g-queding-kx {
		text-align: center;
		background-color: #4988FD;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		color: #fff;
		width: 100%;
	}

	.inp-box {
		width: 100%;
		padding: 20rpx;
	}

	.inp {
		padding: 10rpx;
		border: 1rpx solid #dfdfdf;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
	}

	.upd-box {
		width: 200rpx;
		height: 200rpx;
		border: 1rpx solid #dfdfdf;
	}
</style>